<template>
	<view class="electricityList" @click="cueFlag=false">
		<view class="electricityList_title">
			月排行 &nbsp;<view class="custom-icon custom-icon-wenhao" @click.stop="cueFlag=!cueFlag"></view>
		</view>
		<view class="electricityList_display" v-if="cueFlag">最近31天发电总额，从高到底排序</view>
		<view class="electricityList_leaderboard" v-for="(item,index) in 10" :key=index>

			<view class="image">
				<view class="count"
					:class="index === 0 ? 'iconColorOne' : index === 1 ? 'iconColorTwo' : 'iconColorThree'">
					<text v-if="index < 3">
						<view class="custom-icon custom-icon-yuandian"></view>
					</text>
				</view>
				<image @click="gotoElectricityListUser" src="@/static/2.jpg" mode="widthFix"></image>
			</view>
			<view class="name">
				爱发电用户
			</view>
		</view>

		<view style="height: 100rpx;" />
	</view>
</template>

<script>
	export default {
		name: "PaidLists",
		data() {
			return {
				cueFlag: false,
				message: '最近31天发电总额，从高到底排序', //消息提示
			}
		},
		methods: {
			gotoElectricityListUser() {
				uni.navigateTo({
					url: "/pages/electricityListUser/electricityListUser"
				})
			},
			a() {
				console.log(this.cueFlag)
				this.cueFlag = !this.cueFlag
			}
		}
	}
</script>

<style scoped lang="scss">
	.iconColorOne {
		color: #fed73a;
	}

	.iconColorTwo {
		color: #cbd8ec;
	}

	.iconColorThree {
		color: #fdba8a;
	}

	.electricityList {
		width: 90%;
		margin: auto;
		// height: 100vh;
		
		.electricityList_display {
			width: 310rpx;
			// border: 1px red solid;
			text-align: center;
			font-size: 24rpx;
			background: #fff;
			border-radius: 20rpx;
			position: absolute;
			left: 200rpx;
			padding: 20rpx;
			z-index: 999;
		}
	}

	.electricityList_title {
		width: 90%;
		line-height: 100rpx;
		font-size: 45rpx;
		margin: auto;
		display: flex;
		align-items: center;

		.custom-icon-wenhao {
			margin-left: 20rpx;
		}

		

		.text {
			font-size: 32rpx;
		}

		.electricityList_title_cue {
			width: 60%;
			font-size: 24rpx;
			line-height: 100rpx;
			// border: 1px red solid;
			// background: #fff;
			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
			border-radius: 8rpx;
			text-align: center;
			background: #fff;
			position: absolute;
			top: 250rpx;
			left: 150rpx;
		}
	}

	.electricityList_leaderboard {
		width: 100%;
		margin: auto;
		// border: 1px red solid;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;

		align-items: center;

		.image {
			width: 30%;
			// border-radius: 100rpx;

			display: flex;
			justify-content: space-evenly;
			align-items: center;
			justify-content: center;

			.count {
				width: 20%;
				// border: 1px red solid;
			}

			image {
				width: 50%;
				border-radius: 200rpx;
				// border: 1px red solid;
			}

			//#ifdef H5
			image {
				width: 30%;
			}

			//#endif
		}

		.name {
			width: 80%;
			line-height: 100rpx;
		}
	}
</style>